<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>摆设效果_油画</title>
<link href="../style/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>

<script type="text/javascript">
function QFord_getImageSize(FilePath)  
{  
    var imgSize={  
    width:0,  
    height:0  
    };  
    var image=new Image();  
    image.src=FilePath;  
    imgSize.width =image.width;  
    imgSize .height=image.height;  
    return imgSize;  
}  
</script>

<style type="text/css">

#effectDiv{ width: 100%;background-color: #666666;margin-top: 10px;margin-bottom: 10px;}

.main{ width:960px; margin:0 auto;}
.container{position:relative;padding-top: 20px;padding-bottom: 20px;}
.preImg{position:absolute; left:-24px;top:200px;z-index: 300 }
.nextImg{position:absolute; right:-24px; top:200px;z-index: 300}
.imgBox{position:relative;width:910px;height:530px;margin:0 auto;background: url("../images/bj1.gif") no-repeat;overflow: hidden;}
.showing{position:absolute;margin:0 auto;left:203px;top: 40px;text-align: center;}
.left_up_youhua{position:absolute;left:203px;top: 40px;}
.right_up_youhua{position:absolute;left:203px;top: 40px;}
.left_down_youhua{position:absolute;left:203px;top: 40px;}
.right_down_youhua{position:absolute;left:203px;top: 40px;}
.left_youhua{position:absolute;left:203px;top: 40px;}
.right_youhua{position:absolute;left:203px;top: 40px;}
.up_youhua{position:absolute;left:203px;top: 40px;}
.down_youhua{position:absolute;left:203px;top: 40px;}
.operateArea{position:absolute;width: 140px;height: 100px;right: 30px;bottom:30px;}
.operateArea span{line-height: 50px;}

.imgList{ overflow:hidden; position:relative; width:960px; height:110px; background:#FFF;margin:0 auto;border:1px solid #ccc;margin-bottom:10px;}
.preBtn{ width:16px; height:90px;position:absolute; left:0px; padding-top:45px;background:#FFF;}
.nextBtn{ width:16px; height:90px;position:absolute; right:0px; padding-top:45px;background:#FFF;}
.imgsBox{height:92px; position:absolute; left:17px; top:0px; text-align:left;overflow:hidden;margin-top: 10px;}
.cur_img_1{width: 155px;height: 90px;float:left;margin-right:12px;border:1px solid #ccc;cursor: pointer}
.cur_img{width: 155px;height: 90px;float:left;margin-right:12px;border:1px solid #ff9900;cursor: pointer}
.cur_img_1:hover{border:1px solid #ff9900;}

.arrow {font-family: "幼圆";font-size: 20px;text-transform: none;color: #cccccc;font-weight: bold;}

</style>

</head>

<body onload="location(0)">

<%@include file="/commons/head.jsp"%>

<!-- 摆设适配图  begin  -->
<c:forEach var="backimg" items="${requestScope.backimgsList}">
	<img src="${img_server }/painting/${backimg }" style="display: none;"/>
</c:forEach>
<!-- 摆设适配图 end  -->

<!-- begin effect  -->
<div id="effectDiv">
<!--begin main-->
<div class="main">
	<!-- begin container-->
		<div class="container">
			<div class="preImg"><img border="0" src="../images/arrow_left.png"/></div>
			<div class="nextImg"><img border="0" src="../images/arrow_right.png"/></div> 
			<div class="imgBox">
				<div class="showing">
					<img src="${img_server }/painting/${painting.imageInfo.id }_m_a.${painting.imageInfo.suffix }" id="showingImage"/>
				</div>
					<div class="left_up_youhua"><img src="../images/painting/left_up_youhua.gif" border="0"/></div>
					<div class="right_up_youhua"><img src="../images/painting/right_up_youhua.gif" border="0"/></div>
					<div class="left_down_youhua"><img src="../images/painting/left_down_youhua.gif" border="0"/></div>
					<div class="right_down_youhua"><img src="../images/painting/right_down_youhua.gif" border="0"/></div>
					<div class="left_youhua"></div>
					<div class="right_youhua"></div>
					<div class="up_youhua"></div>
					<div class="down_youhua"></div>
				<div class="operateArea">
					<span>
						<a href="${ctx }/front/orderAction!orderPrepare.do?pId=${painting.id }">
							<img src="../images/an2.png" width="114" height="31" border="0"/>
						</a>
					</span>
					<span>
						<a href="${ctx}/front/backgroundAction!showDetail.do?id=${painting.id }">
							<img src="../images/an4.gif" width="114" height="31" border="0"/>
						</a>
					</span>
				</div>
			</div>
		</div>
	<!--end container-->
</div>
<!--end main-->
</div>
<!-- end effect  -->

<!-- begin imgList-->
	<div class="imgList">
		<div class="preBtn"><span class="arrow">&lt;</span></div>
		<div class="imgsBox"  id="imgsBoxDiv"></div>
		<div class="nextBtn"><span class="arrow">&gt;</span></div>
	</div>
<!--end imgList-->

<%@include file="/commons/foot.jsp"%>

</body>
<script type="text/javascript">

var backgrounds = ${requestScope.ajaxData};
var  imageID = "${painting.imageInfo.id }";
var  imageSuffix = "${painting.imageInfo.suffix}";

function init(){

    var len = backgrounds.length;

	var imgsBoxDiv = document.getElementById("imgsBoxDiv");
	var htmlStr = "";

 	for(var i= 0 ; i<len; i++){
 		 var imagepath = '${img_server }/background/'+backgrounds[i].imageid+'_s.'+backgrounds[i].suffix;
 		 var imagepath2 = '${img_server }/background/'+backgrounds[i].imageid+'.'+backgrounds[i].suffix;

 		 if( i == 0 ){
 			htmlStr += '<div class="cur_img"><div id='+ i +' name="'+imagepath2 +'" style="margin-top:7px;margin-left:5px;width: 145px;height: 76px;background-position: center center;background-image: url('+imagepath+');"></div></div>';
 		 }else{
 			htmlStr += '<div class="cur_img_1"><div id='+ i +' name="'+imagepath2 +'" style="margin-top:7px;margin-left:5px;width: 145px;height: 76px;background-position: center center;background-image: url('+imagepath+');"></div></div>';
 		 }
 	}
 	
 	imgsBoxDiv.innerHTML = htmlStr ;
 
	if( len >0 ){
	    var back_image_url = '${img_server }/background/'+backgrounds[0].imageid+'.'+backgrounds[0].suffix;
	    var img_url = '${img_server }/painting/'+imageID+"_"+backgrounds[0].id+"_back."+imageSuffix;
	    
		$(".imgBox").css("background-image","url("+ back_image_url +")");
		$(".showing>img").attr("src",img_url);
	}
}

function location(id){

	var errorMessage = '${requestScope.errorMessage}';
	if( errorMessage != ''){
		alert(errorMessage);
		return;
	}

	if( backgrounds.length  <= 0 ){
		return;
	}

	var position  = backgrounds[id].position;

	var img_url = '${img_server }/painting/'+imageID+"_"+backgrounds[id].id+"_back."+imageSuffix;
	var a=QFord_getImageSize(img_url);
	var width_img = a.width;
	var height_img = a.height;

	var left_centroid = 0 ;
	var top_centroid = 0 ; 

	if("1" == position){//左上角
		left_centroid = 228;
		top_centroid = 145;
	}
	else if("2" == position){//中上角
		left_centroid = 455;
		top_centroid = 145;
	}
	else if("3" == position){//右上角
		left_centroid = 680;
		top_centroid = 145;
	}
	else if("4" == position){//左
		left_centroid = 228;
		top_centroid = 215;
	}
	else if("5" == position){//中
		left_centroid = 455;
		top_centroid = 215;
	}
	else if("6" == position){//右
		left_centroid = 680;
		top_centroid = 215;
	}
	else if("7" == position){//左下角
		left_centroid = 228;
		top_centroid = 288;
	}
	else if("8" == position){//中下角
		left_centroid = 455;
		top_centroid = 288;
	}
	else if("9" == position){//右下角
		left_centroid = 680;
		top_centroid = 288;
	}

	var left_showImg = left_centroid - width_img/2;
	var top_showImg = top_centroid - height_img/2;

	$(".showing").css("left",left_showImg+"px");
	$(".showing").css("top",top_showImg+"px");

	var left_up_youhua_left =  left_showImg - 11;
	var left_up_youhua_top = top_showImg - 11;
	$(".left_up_youhua").css("left",left_up_youhua_left+"px");
	$(".left_up_youhua").css("top",left_up_youhua_top+"px");

	var right_up_youhua_left =  left_showImg + width_img;
	var right_up_youhua_top = top_showImg - 11;
	$(".right_up_youhua").css("left",right_up_youhua_left+"px");
	$(".right_up_youhua").css("top",right_up_youhua_top+"px");

	var left_down_youhua_left =  left_showImg - 11;
	var left_down_youhua_top = top_showImg + height_img;
	$(".left_down_youhua").css("left",left_down_youhua_left+"px");
	$(".left_down_youhua").css("top",left_down_youhua_top+"px");

	var right_down_youhua_left =  left_showImg + width_img;
	var right_down_youhua_top = top_showImg + height_img;
	$(".right_down_youhua").css("left",right_down_youhua_left+"px");
	$(".right_down_youhua").css("top",right_down_youhua_top+"px");

	var left_youhua_left = left_showImg -11;
	var left_youhua_top = top_showImg ;
	$(".left_youhua").css("left",left_youhua_left+"px");
	$(".left_youhua").css("top",left_youhua_top+"px");
	$(".left_youhua").css("width",11+"px");
	$(".left_youhua").css("height",height_img+"px");
	$(".left_youhua").css("background","url(../images/painting/left_youhua.gif)");

	var right_youhua_left = left_showImg + width_img;
	var right_youhua_top = top_showImg;
	$(".right_youhua").css("left",right_youhua_left+"px");
	$(".right_youhua").css("top",right_youhua_top+"px");
	$(".right_youhua").css("width",11+"px");
	$(".right_youhua").css("height",height_img+"px");
	$(".right_youhua").css("background","url(../images/painting/right_youhua.gif)");

	var up_youhua_left = left_showImg;
	var up_youhua_top = top_showImg - 11;
	$(".up_youhua").css("left",up_youhua_left+"px");
	$(".up_youhua").css("top",up_youhua_top+"px");
	$(".up_youhua").css("width",width_img+"px");
	$(".up_youhua").css("height",11+"px");
	$(".up_youhua").css("background","url(../images/painting/up_youhua.gif) repeat-x");

	var down_youhua_left = left_showImg;
	var down_youhua_top = top_showImg + height_img;
	$(".down_youhua").css("left",down_youhua_left+"px");
	$(".down_youhua").css("top",down_youhua_top+"px");
	$(".down_youhua").css("width",width_img+"px");
	$(".down_youhua").css("height",11+"px");
	$(".down_youhua").css("background","url(../images/painting/down_youhua.gif) repeat-x");
}

$(function(){

	init();

	var index = $(".imgsBox>div").index($(".cur_img"));
	$(".preImg").hover(function(){
   			$(this).css({cursor:"pointer",filter:"alpha(opacity=50)",opacity:"0.50"});
			},function(){
				$(this).css({cursor:"pointer",filter:"alpha(opacity=100)",opacity:"1.0"});
			});	
	$(".nextImg").hover(function(){
			$(this).css({cursor:"pointer",filter:"alpha(opacity=50)",opacity:"0.50"});
			},function(){
				$(this).css({cursor:"pointer",filter:"alpha(opacity=100)",opacity:"1.0"});
			});
	$(".preBtn").hover(function(){
		$(this).css({cursor:"pointer"});
		});
	$(".nextBtn").hover(function(){
		$(this).css({cursor:"pointer"});
		});	
	$(".preBtn").click(function(){
				setZindex();				
				$(".imgsBox").animate({left:"+=338px"},300,"linear",checkPos);
	   });	
	$(".nextBtn").click(function(){
				setZindex();			
				$(".imgsBox").animate({left:"-=338px"},300,"linear",checkPos);//228px为两张图片的位置			
		});
	function checkPos(){
		//alert("callBack");
		if(parseInt($(".imgsBox").css("left"))>17){					
					$(".imgsBox").animate({left:"17px"},300);
				}
		if(parseInt($(".imgsBox").css("left"))<-(parseInt($(".imgsBox").css("width"))-584)){					
				$(".imgsBox").animate({left:-(parseInt($(".imgsBox").css("width")))+584+"px"},300);			
		}	
	}
	$(".imgsBox>div").click(function(){
			    index=$(".imgsBox>div").index($(this));

			    var image_url = $(this).find("div").attr("name");
				$(".imgBox").css("background-image","url("+ image_url +")");

				var id =  $(".imgsBox>div").eq(index).find("div").attr("id");
				var img_url = '${img_server }/painting/'+imageID+"_"+backgrounds[id].id+"_back."+imageSuffix;
				$(".showing>img").attr("src",img_url);

				location(id);

				$(".cur_img").addClass("cur_img_1").removeClass("cur_img");
				$(this).addClass("cur_img");
		});
	$(".preImg").click(function(){
				setZindex();
				if(index>0){
					index-=1;
				}
				
				var image_url = $(".imgsBox>div").eq(index).find("div").attr("name");
				$(".imgBox").css("background-image","url("+ image_url +")");
				
				var id =  $(".imgsBox>div").eq(index).find("div").attr("id");
				var img_url = '${img_server }/painting/'+imageID+"_"+backgrounds[id].id+"_back."+imageSuffix;
				$(".showing>img").attr("src",img_url);

				location(id);
				
				if(parseInt($(".imgsBox").css("left"))<17){					
					$(".imgsBox").animate({left:"+=169px"},300,"linear",checkPos);		
				}
				$(this).css({"z-index":"303"});
				$(".nextImg").css({"z-index":"304"});
				$(".cur_img").addClass("cur_img_1").removeClass("cur_img");
				$(".imgsBox>div").eq(index).addClass("cur_img");
		});
	
	$(".nextImg").click(function(){
				setZindex();
				var totalLen = $(".imgsBox>div").length;
				if(index< totalLen-1 ){
					index+=1;
				}

				var image_url = $(".imgsBox>div").eq(index).find("div").attr("name");
				$(".imgBox").css("background-image","url("+ image_url +")");

				var id =  $(".imgsBox>div").eq(index).find("div").attr("id");
				var img_url = '${img_server }/painting/'+imageID+"_"+backgrounds[id].id+"_back."+imageSuffix;
				$(".showing>img").attr("src",img_url);

				location(id);
				
				if(parseInt($(".imgsBox").css("left"))>-(parseInt($(".imgsBox").css("width"))-584)){						
					$(".imgsBox").animate({left:"-=169px"},300,"linear",checkPos);			
				}
				$(".preImg").css({"z-index":"303"});
				$(this).css({"z-index":"304"});
				$(".cur_img").addClass("cur_img_1").removeClass("cur_img");
				$(".imgsBox>div").eq(index).addClass("cur_img");
	});
	
	function setZindex(){
		$(".preBtn").css({"z-index":"300"});
		$(".nextBtn").css({"z-index":"301"});
	}
});
</script>
</html>